<template>
  <div class="page">
    <div class="J-coupon">
      <div class="J-nav pl line-bottom">
        <div class="fl">共有 {{getvipCouponList.total}} 张优惠劵</div>
        <span class="fr AddCoupon" @click="couponAdd">添加</span>
      </div>
      <div class="coupon-list">
        <get-data :scroller-data="getvipCouponList" :config="config" ref="scroller" @on-resize="resize" :type="type">
          <div class="coupon" v-for="item in getvipCouponList.data">
            <div class="weui-flex pl line-bottom">
              <div class="weui-flex__item pl">
                <div class="status" :class="{status_1:item.status==0,status_2:item.status==1,status_3:item.status==2}"><span>{{item.status==0?'未使用':item.status==1?'已使用':item.status==2?'已过期':''}}</span></div>
                <div class="coupon_ coupon_first">
                  <div class="coupon_text">{{item.quanName}}</div>
                  <div class="coupon_data">有效期：{{item.validTime}}</div>
                </div>
                <div class="coupon_">
                  <div class="coupon_yh">订单金额满{{item.limitPrice | parseInt}}元可用</div>
                  <div class="coupon_mz">{{item.gasstation}}</div>
                </div>
              </div>
            </div>
          </div>
        </get-data>
        <div v-if="isData" class="nodata">暂无优惠劵</div>
      </div>
    </div>
    <div class="add-coupon-fixd" v-if="couponAalet">
      <div class="add-coupon-bg" @click="couponClose"></div>
      <div class="add-coupon-from">
        <div class="weui-flex">
          <div class="weui-flex__item">
            <div class="coupon-name">添加优惠劵<span @click="couponClose" class="add-coupon-close"></span></div>
          </div>
        </div>
          <div class="weui-flex pl line-bottom line-top">
            <div class="weui-flex__item pl line-left line-right">
              <input class="weui-input" v-model="coupon_code" type="text" placeholder="请输入优惠劵号码">
            </div>
          </div>
          <div class="weui-flex">
            <div class="weui-flex__item">
              <div @click="submitPrice" class="weui-btn weui-btn_primary">添加</div>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import GetData from '~components/mixins/getData.vue'
  export default {
    name: 'vip-coupon',
    data () {
      return {
        couponAalet: false,
        coupon_code: '',
        isData: true,
        type: 'getvipCouponList',
        config:{
          id: this.$route.query.id,
          page:'1'
        }
      }
    },
    computed: {
      ...mapGetters({
        getvipCouponList: 'getvipCouponList'
      })
    },
    components: {
      GetData
    },
    mounted () {
      var _this = this
      if (_this.getvipCouponList.data.length == 0 || _this.getvipCouponList.code == '404') {
        _this.$refs.scroller.getData(this.$route.query.id)
      } else {
        this.isData = false
      }
    },
    methods: {
      couponAdd () {
        this.couponAalet = true
      },
      couponClose () {
        this.couponAalet = false
      },
      submitPrice () {
        var _this = this
        var config = {
          code: this.coupon_code,
          id: this.config.id,
          callback: function () {
            _this.couponAalet = false
            _this.resize()
          }
        }
        this.$store.dispatch('AddCoupon', config)
      },
      resize (scroller) {
        setTimeout(() => {
          scroller && scroller.resize()
        })
      }
    }
  }
</script>
<style lang="scss">
  .add-coupon-close{
    float: right;
    height:12px;
    position: relative;
    padding:4px;
    margin:2px -4px 0 0;
    &:after,&:before{
      content: '';
      display: block;
      width:12px;
      height:1px;
      background-color:#333;
      position:relative;
      top:4px;
    }
    &::after{
      -webkit-transform:rotate(-45deg);
      transform:rotate(-45deg);
    }
    &::before{
      -webkit-transform:rotate(45deg);
      transform:rotate(45deg);
      left:0px;
      top:5px;
    }
  }
  .add-coupon-fixd{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    .line-right::after {
      border-left: none;
      right: -1px;
      left: inherit;
    }
    .add-coupon-bg{
      width:100%;
      height:100%;
      background-color:rgba(0,0,0,0.6);
    }
  }
  .add-coupon-from{
    width:240px;
    height:112px;
    position: absolute;
    top:50%;
    left:50%;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    padding:0 10px 10px;
    margin-left:-130px;
    margin-top:-138px;
    background-color:#fff;
    .weui-flex{
      .coupon-name{
        font-size:14px;
        height:30px;
        margin-top:4px;
      }
      .weui-input{
        padding:6px 0 7px;
        text-indent:.7em;
        font-size:14px;
      }
      .weui-btn{
        font-size:14px;
        line-height: 2.55555556;
        border-radius:0;
        &:after{
          border-radius:0;
        }
      }
    }
    .weui-flex:last-child{
      margin-top: 10px;
    }
    .line-bottom{
      &:after{
        bottom:-2px;
      }
    }
  }
  .coupon-list{
    height:calc(100% - 38px);
    position: relative;
    .no-data-text{
      background-color:#f8f8f8 !important;
    }
  }
  .J-coupon {
    height: 100%;
    .status_1{
       border-top: 42px solid #009900;
     }
    .status_2{
      border-top: 42px solid #eee;
      span{
        color: #9a9797 !important;
      }
    }
    .status_3{
      border-top: 42px solid red;
    }
    .status{
      width: 0;
      height: 0;
      border-right: 42px solid transparent;
      position: absolute;
      left:-20px;
      top:-10px;
      span{
        display: block;
        width:42px;
        height:42px;
        position: absolute;
        top:-42px;
        text-align: center;
        font-size:10px;
        line-height: 26px;
        color:#fff;
        transform:rotate(-45deg);
      }
    }
    .AddCoupon{
      background-color: #009900;
      padding:3px 8px 4px;
      position: absolute;
      right:10px;
      top:6px;
      color:#fff;
      margin-right:5px;
      font-size:12px;
    }
    .coupon{
      padding:15px 15px 0;
    }
    .weui-flex{
      padding:10px 15px 10px 20px;
      background-color:#fff;
    }
    .coupon_first{
      float:left;
    }
    .coupon_text{
      font-size:18px;
      overflow: hidden;
      width:150px;
      text-overflow:ellipsis;
      white-space:nowrap;
      color:#333;
    }
    .coupon_data{
      font-size:12px;
      color:red;
      white-space:nowrap;
    }
    .coupon_yh{
      font-size:14px;
      margin-top:5px;
      text-align: right;
      color:#868686
    }
    .coupon_mz{
      font-size:12px;
      margin-top:6px;
      text-align: right;
      color:#009900
    }
  }
</style>
